// 生成九宫格
import Sudoku from '../core/sudoku';
import Checker from '../core/checker';

class Grid {
    private _$container;

    constructor(container) {
        this._$container = container
    }

    build() {
        // const generator = new Generator();
        // generator.generate();
        // const matrix = generator.matrix;
        // const matrix = Toolkit.matrix.makeMatrix();
        const sudoku = new Sudoku();
        sudoku.make();
        const matrix = sudoku.puzzleMatirx;


        const rowGroupClasses = ['row_g_top', 'row_g_middle', 'row_g_bottom']
        const colGroupClasses = ['col_g_left', 'col_g_center', 'col_g_right']
        const $cells = matrix.map(rowValues =>
            rowValues.map((cellValue, colIndex) => {
                return $('<span>')
                    .addClass(colGroupClasses[colIndex % 3])
                    .addClass(cellValue ? 'fixed' : 'empty')
                    .text(cellValue)
            })
        );
        const $divArray = $cells.map(($spanArray, rowIndex) => {
            return $('<div>')
                .addClass('row')
                .addClass(rowGroupClasses[rowIndex % 3])
                .append($spanArray)
        });
        this._$container.append($divArray)
    }

    // 调整方块高度
    layout() {
        const width = $('span:first', this._$container).width();
        $('span', this._$container)
            .height(width)
            .css({
                'line-height': `${width}px`,
                'font-size': width < 32 ? `${width / 2}px` : ''
            })
    }

    // 检查用户输入是否正确
    check() {
        // 从界面获取需要检查的数据
        const $row = this._$container.children();
        const data = $row
            .toArray()
            .map((rowIndex, div: HTMLElement): number[] => {
                return $(div).children()
                    .toArray()
                    .map((spancolIndex) => parseInt($(span).text()) || 0)
            })
            .map($data => $data.toArray());
        console.log(data)
        const checker = new Checker(data);
        if (checker.check()) {
            return true
        }
        // 检查不成功，进行标记
        const marks = checker.matrixMarks;
        this._$container.children()
            .each((rowIndex, div) => {
                $(div).children().each((colIndex, span) => {
                    const $span = $(span);
                    if ($span.is('.fixed') || marks[rowIndex][colIndex]) {
                        // return;
                        $span.removeClass('error')
                    } else {
                        // 检查错误，添加错误标记
                        $span.addClass('error');
                    }

                })
            })
    }

    reset() {
        this._$container.find('span:not(.fixed)')
            .removeClass('error mark1 mark2')
            .addClass('empty')
            .text('0');
    }

    clear() {
        this._$container.find('span.error')
            .removeClass('error')
    }

    rebuild() {
        this._$container.empty();
        this.build()
        this.layout()
    }

    bindPopup(popupNumbers) {
        this._$container.on('click', 'span', e => {
            const $cell = $(e.target);
            if ($cell.is('.fixed')) {
                return;
            }
            popupNumbers.popup($cell)
        })
    }
}

export {Grid}
// module.exports = Grid;
export default Grid;
